<!DOCTYPE html>

<html>
<head>
<script type="text/javascript">
function validation(){
	//1.Retrieve the form info
	var name = document.forms[0].elements[0].value;
	var isNameContent = true;
	//2.validate the name
	
	//2.1 check empty name
	if(name==""){
	alert("Empty letter");
	isNameContent = false;
	}
	
	//2.2 check First Letter Capital
	if(isNameContent){
		if(name.charAt(0)<'A'||name.charAt(0)>'Z'){
			alert("First letter invalid");
			isNameContent = false;
		}
	}
	
	//2.3 check each letter in it
	if(isNameContent){
		for(var i = 1; i<name.length;i++){
			//if not Uppercase and not Lowercase and not space 
			//It is not a good validation, for I did not consider the space in the front
			if((name.charAt(i)<'A'||name.charAt(i)>'Z') &&
			   (name.charAt(i)<'a' ||name.charAt(i)>'z') &&
			    name.charAt(i)!=' '){
				//The name content failed and break
				alert("Middle letter invalid");
				isNameContent = false; break;
			}
		}
	}
	
	//3.Perform the hint
	if(isNameContent == false){
		window.alert("Name invalid. Please check your name.");
		return false;
	}
	
	return true;	
}

</script>
</head>
<body>
<form action="http://localhost:8080/Lab4/SimpleHoroscope"  onSubmit="return validation()">
Input your name:<input type="text" name="name"><br>
Select your Zodiac sign:<br>
  <select name="Zodiac">
	<option value="1">Aries</option>
	<option value="2">Taurus</option>
	<option value="3">Gemini</option>
	<option value="4">Cancer</option>
	<option value="5">Leo</option>
	<option value="6">Virgo</option>
	<option value="7">Libra</option>
	<option value="8">Scorpio</option>
	<option value="9">Sagittarius</option>
	<option value="10">Capricorn</option>
	<option value="11">Aquarius</option>
	<option value="12">Pisces</option>
  </select>
<br>
<input type="submit" value="input your name and sign">
</form>
</body>
</html>